<template>
  <el-row :gutter="20" type="flex" justify="center" class="timeStampCard">
    <el-col>
      <div class="block">
        <div v-if="!coursesList.length">暂无课程</div>

        <el-timeline>
          <el-timeline-item
            v-for="(timeList, index) in coursesList"
            :key="index"
            v-bind:timestamp="timeList[0].publishTime | filterTime"
            placement="top"
          >
            <el-card
              v-for="(course, index) in timeList"
              :key="index"
              class="heightlock"
            >
              <el-container>
                <el-aside>
                  <img
                    v-bind:src="+ course.iconPath"
                    alt=""
                    srcset=""
                    class="imgLock"
                  />
                </el-aside>
                <el-main class="setpadding">
                  <el-container class="setposition">
                    <el-header class="setsize">{{
                      course.name | filterName
                    }}</el-header>
                    <el-main class="setmain">Message</el-main>
                    <router-link
                      :to="{
                        name: 'Coursedetail',
                        query: {
                          courseId: course.courseID,
                          currNo: course.currNo,
                        },
                      }"
                    >
                      <div class="setbutton">课程详情</div>
                    </router-link>
                  </el-container>
                </el-main>
              </el-container>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { getCurriculumlist } from "@/request/courses";
export default {
  props: {
    timestamp: {
      type: String,
      default() {
        return " ";
      },
    },
  },
  data() {
    return {
      courses: [],
      coursesList: [],
    };
  },

  filters: {
    filterName(value) {
      return value.substring(0,value.lastIndexOf('_') == -1 ? value.length:value.lastIndexOf('_'));
    },
    filterTime(value) {
      let times = new Date(value);
      return (
        times.getFullYear() +
        "年" +
        (times.getMonth() + 1) +
        "月" +
        times.getDate() +
        "日"
      );
    },
  },
  computed: {},
  watch: {
    courses: function (value) {
      this.courses = value;
      this.processCourses();
    },
  },
  created() {
    this.getCourses();
  },
  methods: {
    getCourses() {
      getCurriculumlist().then((data) => {
        // if (res.errno === 0) {
        this.courses = data?.reverse() || [];
        // }
      });
    },
    processCourses() {
      let allcourses = Array.from(this.courses);
      const groupBy = (array, f) => {
        const groups = {};
        array.forEach(function (o) {
          const group = JSON.stringify(f(o)).split("T")[0];
          groups[group] = groups[group] || [];
          groups[group].push(o);
        });
        return Object.keys(groups).map(function (group) {
          return groups[group];
        });
      };
      const arrayGroupBy = (list, groupId) => {
        const sorted = groupBy(list, function (item) {
          return [item[groupId]];
        });
        return sorted;
      };
      const mergeList = arrayGroupBy(allcourses, "publishTime");
      this.coursesList = mergeList;
    },
  },
};
</script>

<style lang="stylus" scoped>
.timeStampCard {
  padding-top: 25px;
  margin: 0 auto !important;
  max-width: 1200px;
}

.heightlock {
  height: 200px;
  min-width: 550px;
}

.el-row {
  margin: 25px 0 0;
}

.el-card {
  margin: 15px 0;
}

.el-aside {
  width: 236px;
  height: 160px;
}

.imgLock {
  object-fit: cover;
  width: 236px;
  height: 100%;
  border-radius: 5px;
}

.setpadding {
  padding: 0;
}

.setsize {
  height: 21px;
  white-space: nowrap;
  color: #000000;
}

.setmain {
  height: 100px;
  padding: 0 20px;
  color: #666666;
}

.setposition {
  position: relative;
}

.setbutton {
  cursor: pointer;
  width: 123px;
  height: 30px;
  background-color: #f6ad35;
  border-radius: 20px;
  text-align: center;
  padding: 5px 0;
  color: #ffffff;
  position: absolute;
  right: 10px;
  bottom: 5px;
}
</style>